<template>
	<view class="page">
		<list reqUrl="/api/tmpbtuser" ref="listInstance">
			<template v-slot=" { list }">
				<view class="team" v-for="item in list" :key="item.rember_id">
					<view class="face">
						<fr-image radius="50%" style="width: 100%;height: 100%;" mode="aspectFill"
							:src="item.head_img" />
					</view>
					<view class="right_content">
						<view class="nick one-line">{{ item.nickname }}</view>
						<view class="id">ID：{{ item.user_id }}</view>
						<view class="time">时间：{{ item.create_at }}</view>
					</view>
				</view>
			</template>
		</list>
	</view>
</template>

<script setup>
	import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	import request from '@/utils/common/request/index';

	const listInstance = ref(null);
	// * 下拉刷新事件
	onPullDownRefresh(() => {
		Promise.all([listInstance.value.resetRequest()]).finally(() => {
			uni.stopPullDownRefresh();
		});
	});
	// * 页面触底事件，不能删除，否则不能触发list组件触底事件
	onReachBottom(() => {});
</script>

<style lang="scss" scoped>
	.team {
		position: relative;
		display: flex;
		padding: 12px 14px;
		border-radius: 10px;
		background-color: #fff;

		&+.team {
			margin-top: 10px;
		}

		.face {
			flex-shrink: 0;
			width: 60px;
			height: 60px;
			overflow: hidden;
		}

		.right_content {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding: 2px 0 0 10px;

			.nick {
				font-weight: bold;
			}

			.id {
				margin: 4px 0 4px;
				font-size: 12px;
				color: #999;
			}

			.time {
				font-size: 12px;
				color: #999;
			}
		}
	}
</style>
<style>
	/*只能在这里设置*/
	page {
		background-color: #f5f5f5;
	}
</style>